<template>
    <div class="tend_time_index">
        <div class="time_item" v-for="item in monitorState.timeSelects"
            :class="monitorState.chartmodule.activeTime == item.value ? 'active_time_item' : ''"
            @click="clicktendtab(item.value)" :key="item.value">{{ item.label }}
        </div>
    </div>
</template>

<script setup>
const { monitorStore, monitorState } = inject('MonitorStore')

const clicktendtab = (value) => {
    monitorState.chartmodule.activeTime = value
    
    monitorStore.getechartsData()
}
</script>

<style lang="scss" scoped>
.tend_time_index {
    padding: 0 12px;
    height: 100%;
    display: flex;
    align-items: center;

    .time_item {
        font-size: 11px;
        color: #8a8a8a;
        margin-right: 12px;
        cursor: pointer;
    }
}

.active_time_item {
    font-size: 11px;
    font-weight: 600;
    color: #000 !important;
}
</style>